<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成行">如何成行</router-link>
    </div>
    <div>
      <button>跳转到详情页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpValue: "",
      userinfo: {
        name: 'lsj',
        age: 18,
        gender: 1,
        hobbys:['bangqiu','pingpangqiu','diwudadaode youxiongxunlian']
      }
    };
  },
  methods: {
    goSearch() {
      // this.$router.push("/search?key=" + this.inpValue);
      //  this.$router.push("/search/"+this.inpValue)
      // 路由地址跳转
      // this.$router.push({
      //   path: "/search/" + this.inpValue,
      //   /* query: {
      //     key: this.inpValue,
      //     name:'ljs'
      //   } */
      // });

     
      //路由名跳转，需要在router.js中配置路由名
      this.$router.push({
        name: "search",
        params: {
          words: this.userinfo
        }
      });
    },
  },
};
</script>

<style scoped>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>